import React from 'react'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
import HotSongsListItem from '../components/core/HotSongsListItem/HotSongsListItem'
import HotTop from '../components/core/HotTop/HotTop'
import { getHotSongs, IHotSong, IPlaylistResult } from '../store/actions/hotsongs.action'
import { AppStore } from '../store/reducers'

const HotMusic = () => {
  const dispatch = useDispatch()
  const state = useSelector<AppStore, IPlaylistResult>(state => state.hotSongsList)

  useEffect(() => {
    dispatch(getHotSongs())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <div>
      <HotTop updateTime={state.updateTime}/>
      {
        state.tracks.map((hotSong: IHotSong, index: number) => <HotSongsListItem key={'hot-song-' + index} item={hotSong}/>)
      }
    </div>
  )
}

export default HotMusic
